<div>
  <ul class="tab-nav">
    <li ng-class="{active: currentTab == 'general'}"><a ng-click="currentTab='general'">General</a></li>
    <li ng-class="{active: currentTab == 'groups'}"><a ng-click="currentTab='groups'">Groups</a></li>
    <li ng-class="{active: currentTab == 'map'}"><a ng-click="currentTab='map'">Map Settings</a></li>
  </ul>

  <div ng-show="currentTab == 'general'" class="m-t-10 m-b-10">
    <div class="form-group">
      <label class="control-label">Latitude Column Name</label>
      <ui-select name="form-control" required ng-model="visualization.options.latColName">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in columnNames | remove:visualization.options.classify | remove:visualization.options.lonColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="form-group">
      <label class="control-label">Longitude Column Name</label>
      <ui-select name="form-control" required ng-model="visualization.options.lonColName">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in columnNames | remove:visualization.options.classify | remove:visualization.options.latColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="form-group">
      <label class="control-label">Group By</label>
      <ui-select name="form-control" required ng-model="visualization.options.classify">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in classify_columns | remove:visualization.options.lonColName | remove:visualization.options.latColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>

  <div ng-show="currentTab == 'groups'" class="m-b-10">
    <table class="table table-condensed col-table">
      <thead>
      <th>Name</th>
      <th>Color</th>
      </thead>
      <tbody>
      <tr ng-repeat="(name, options) in visualization.options.groups">
        <td>{{name}}</td>
        <td>
          <input class="form-control" type="color" ng-model="options.color"/>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div ng-show="currentTab == 'map'" class="m-t-10 m-b-10">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="visualization.options.clusterMarkers">
        <i class="input-helper"></i> Cluster Markers
      </label>
    </div>

    <div class="form-group">
      <label class="control-label">Map Tiles</label>
      <select ng-options="tile.url as tile.name for tile in mapTiles"
        ng-model="visualization.options.mapTileUrl" class="form-control"></select>
    </div>
  </div>

</div>
